<template>
  <view class="background-container">
    <!-- 背景图片层 -->
    <image 
      class="background-image" 
      :src="backgroundSrc" 
      mode="aspectFill"
      :style="customStyle"
    />
    
    <!-- 内容插槽 -->
    <view class="background-content">
      <slot></slot>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'

/**
 * 背景图片组件
 * @property {String} src - 背景图片路径，默认为 /static/background.png
 * @property {Number} opacity - 背景图片透明度，默认为 1
 * @property {String} position - 背景定位，默认为 center
 */
const props = defineProps({
  // 背景图片路径
  src: {
    type: String,
    default: '/static/background.png'
  },
  // 背景透明度 (0-1)
  opacity: {
    type: Number,
    default: 1,
    validator: (value) => value >= 0 && value <= 1
  },
  // 背景定位
  position: {
    type: String,
    default: 'center'
  }
})

// 背景图片源
const backgroundSrc = computed(() => {
  return props.src
})

// 自定义样式
const customStyle = computed(() => {
  return {
    opacity: props.opacity
  }
})
</script>

<style lang="scss" scoped>
.background-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

.background-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  
  /* 确保图片覆盖整个屏幕 */
  object-fit: cover;
  
  /* 禁止用户选择 */
  user-select: none;
  pointer-events: none;
}

.background-content {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
}

/* H5 平台特殊处理 */
/* #ifdef H5 */
.background-image {
  position: fixed;
  background-attachment: fixed;
}
/* #endif */

/* 小程序平台特殊处理 */
/* #ifdef MP */
.background-container {
  background-color: #E8F4F8;
}
/* #endif */
</style>

